<template>
  <div class="table5">
    <el-table
      border
      height="370"
      v-loading="loading"
      :data="tabData"
      row-key="name"
      :default-expand-all="true"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        label="汇总名称"
        align="left"
        min-width="120"
        prop="name"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="总量"
        align="center"
        min-width="100"
        prop="total"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.total | numDealfilters }}
        </template>
      </el-table-column>
      <el-table-column
        prop="month1"
        label="一月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month1 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month2"
        label="二月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month2 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month3"
        label="三月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month3 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month4"
        label="四月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month4 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month5"
        label="五月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month5 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month6"
        label="六月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month6 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month7"
        label="七月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month7 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month8"
        label="八月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month8 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month9"
        label="九月"
        show-overflow-tooltip
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month9 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month10"
        label="十月"
        show-overflow-tooltip
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month10 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month11"
        label="十一月"
        show-overflow-tooltip
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month11 | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month12"
        label="十二月"
        show-overflow-tooltip
        align="center"
        width="110"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.month12 | numDealfilters }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMonthlysummary } from "@/api/general/index.js";
import { dealElectricity } from "@/utils";
export default {
  filters: {
    numDealfilters(num) {
      if (null != num) {
        return dealElectricity(num, 1, 2);
      } else {
        return "";
      }
    },
  },
  components: {},
  props: {
    year: {
      type: [String, Number],
      default: 2024,
    },
  },
  data() {
    return {
      dataList: [],
      loading: false,
      tabData: [],
      // tabData: [
      //   {
      //     name: "办公用电量(kwh)",
      //     fileds: "officialElectricValue",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "非办公用电量(kwh)",
      //     fileds: "nonOfficialElectricValue",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "特殊用电量(kwh)",
      //     fileds: "specialElectricValue",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "公摊用电(kwh)",
      //     fileds: "publicShareElectricValue",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "用水量(t)",
      //     fileds: "energyWater",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "用电量(kwh)",
      //     fileds: "energyElectricity",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "碳排(kgco2)",
      //     fileds: "carbonEmission",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "预算(元)",
      //     fileds: "budgetFund",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "消费统计(元)",
      //     fileds: "cost",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      //   {
      //     name: "结余(元)",
      //     fileds: "balance",
      //     value: [],
      //     month1: 0,
      //     month2: 0,
      //     month3: 0,
      //     month4: 0,
      //     month5: 0,
      //     month6: 0,
      //     month7: 0,
      //     month8: 0,
      //     month9: 0,
      //     month10: 0,
      //     month11: 0,
      //     month12: 0,
      //     month13: 0, // 汇总
      //   },
      // ],
    };
  },
  created() {},
  mounted() {},
  watch: {
    year: {
      handler(val) {
        if (val) {
          this.requestsummary();
        }
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    // 综表统计
    requestsummary() {
      this.loading = true;
      let query = {
        year: this.year,
        // pageSize: 1,
      };
      // query.deptIds = [this.$store.state.user.deptId];
      getMonthlysummary(query)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          this.tabData = arr;
          // if (arr.length > 0) {
          //   arr.map((item, index) => {
          //     this.tabData.map((tig) => {
          //       for (let key in item) {
          //         if (key == tig.fileds) {
          //           tig["month" + (index + 1)] = item[key];
          //         }
          //       }
          //     });
          //   });
          // }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "@/assets/styles/mixin.scss";
// .table5 {
//   @include scrollBar3(rgba(138, 133, 133, 0.8));
// }
</style>
